// pages/video/video.js
import request from '../../utils/request'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    videoGroupList:[],// 导航标签数据
    navId:[], //导航标识
    videoList:[],//视频列表数据
    videoId:'',//视频 id 标识
    videoUpdateTime:[],// 记录video 播放的时长
    isTriggered:false, //
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //在这里调用  获取导航数据
    this.getVideoGroupListData();
    
  },

  //获取导航数据
async getVideoGroupListData(){
  // videoGroupListData 获取元数据
  let videoGroupListData = await request('/video/group/list');
  //更新数据到 data 中保存起来
  this.setData({
    videoGroupList: videoGroupListData.data.slice(0, 14),//slice(0, 14) 表示截取了0-14 条数据
    navId: videoGroupListData.data[0].id //页面一加载就让导航下横线显示出来
  })
  //获取视频列表数据   什么时候拿到导航的数据,就什么时候拿到视频的数据
  this.getVideoList(this.data.navId)
},
//获取视频列表数据
 async getVideoList(navId){
   if(!navId){//判断navId为空的话就不能请求
    return;
  }
  let videoListData = await request('/video/group',{id: navId});
  //关闭加载消息提示
  wx.hideLoading();

  let index = 0;
  let videoList = videoListData.datas.map(item=>{
    item.id = index++;
    return item; //一定要返回出去
  })
  this.setData({
    videoList, 
    //关闭下拉刷新
    isTriggered:false
  })

},

//点击切换导航的下面 横线问题 
changeNav(event){
  //通过id向event 传参的时候 如果传的是 number 会自动转换成string
  //let navId = event.currentTarget.id; 
  let navId = event.currentTarget.dataset.id; //通过 data-id 传过来的值它帮转换成 number
  this.setData({
    navId:navId * 1, //乘以 1 是强制转换数字类型
   videoList:[], //点击的时候清空数据,加载新的数据
  })
  //显示正在加载
  wx.showLoading({
    title: '正在加载',
  })
  //动态获取当前导航对应的视频数据
  this.getVideoList(this.data.navId);
},

//点击播放/继续播放的回调
handlePlay(event){
      /*
      问题： 多个视频同时播放的问题
    * 需求：
    *   1. 在点击播放的事件中需要找到上一个播放的视频
    *   2. 在播放新的视频之前关闭上一个正在播放的视频
    * 关键：
    *   1. 如何找到上一个视频的实例对象
    *   2. 如何确认点击播放的视频和正在播放的视频不是同一个视频
    * 单例模式：
    *   1. 需要创建多个对象的场景下，通过一个变量接收，始终保持只有一个对象，
    *   2. 节省内存空间
    * */
   let vid = event.currentTarget.id;
   //关闭上一个播放的视频   判断方式一 推荐使用
   this.vid !== vid && this.videoContext && this.videoContext.stop();
   //方式二
  //  if(this.vid !== vid){
  //    if(this.videoContext){
  //      this.videoContext.stop()
  //    }
  //  }
  this.vid = vid;
  
  //更新data 中video 的状态数据
  this.setData({
    videoId:vid
  })
  //创建控制video 标签的实例对象  通过实例调用 stop()方法
  this.videoContext = wx.createVideoContext(vid)
  
  //判断当前的视频之前是否播放过，是否有播放记录，如果有，跳转指定的播放位置
  let { videoUpdateTime } = this.data;
  let videoItem = videoUpdateTime.find(item => item.vid === vid);
  if(videoItem){
    this.videoContext.seek(videoItem.currentTime)
  }
  this.videoContext.play(); //点击自动播放视频

},

//监听视频播放进度条的回调
handleTimeUpdate(event){
  console.log(event)
  //拿到播放的时长 和 视频的 vid (某个视频)
  let videoTimeObj = {vid:event.currentTarget.id, currentTime:event.detail.currentTime}; 
  let {videoUpdateTime } =this.data;
  /**
   * 思路： 判断记录播放时长的 videoUpdateTime 数组中是否有当前视频的播放记录
   *      1. 如果有，在原有的播放记录中修改时间为当前的播放时间
   *      2. 如果没有，需要在数组中添加当前视频的播放对象
   */
  let videoItem = videoUpdateTime.find(item => item.vid === videoTimeObj.vid);
  //判断之前有
  if(videoItem){
    videoItem.currentTime = event.detail.currentTime;
  }else{ //之前没有 就添加
    videoUpdateTime.push(videoTimeObj);
  }
  //更新 videoUpdateTime 的状态
  this.setData({
    videoUpdateTime
  })
},

//视频播放结束的问题
handleEnd(event){
  // console.log('播放结束')
  let { videoUpdateTime } = this.data; //先从 data 中把数组拿过来
   //移除记录播放时长数组中当前视频的对象 splice() 删除
  videoUpdateTime.splice(videoUpdateTime.findIndex(item => item.vid === event.currentTarget.id), 1);
  this.setData({
    videoUpdateTime
  })
},
//自定义下拉刷新的回调 : scroll-view
handleRefresher(){
  //再次发请求，获取最新的视频列表数据
  this.getVideoList(this.data.navId);
},

//跳转到搜素页面
toSearch(){
  wx.navigateTo({
    url: '/pages/search/search',
  })
},

//自定义上拉底部刷新的回调 scroll-view
// handleToLower(){
//   console.log('上拉刷新底部 scroll-view')
//   //数据分页: 1.后端分页 2.前端分页
//   console.log('发送请求 || 在前端截取最新的数据 ，追加到视频列表的后方');
//   //模拟数据
//   let newVideoList =[
//     {id: 1, name:'没数据',age:18},
//     {id: 1, name:'没数据',age:18},
//   ];
// //将视频最新的数据更新原有视频列表数据中
// videoList.push(...newVideoList);
// this.setData({
//   videoList
// })

//},


/**
 * 用户点击  右上角  或者 自定义按钮  分享
 */
onShareAppMessage: function({from}){
  if(from === 'button'){
    return {
      title:'来自按钮的转发',
      page:'/pages/video/video',
      imageUrl:'/static/images/1.png'
    }
  }else{
    return {
      title:'来自右上角的转发',
      page:'/pages/video/video',
      imageUrl:'/static/images/1.png'
    }
  }
},

})